<template>
  <view class="work-container">
    <!-- 状态栏占位 -->
    <view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 背景装饰 -->
    <view class="background-decoration">
      <view class="decoration-shape shape-1"></view>
      <view class="decoration-shape shape-2"></view>
      <view class="decoration-shape shape-3"></view>
    </view>

    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">工作台</text>
        <text class="page-subtitle">系统管理与监控中心</text>
      </view>
    </view>

    <!-- 系统管理模块 -->
    <view class="module-section" :class="{ 'section-active': activeSection === 'system' }">
      <view class="module-header">
        <view class="header-left">
          <view class="title-icon">
            <wd-icon name="setting" color="#667eea" size="28rpx" />
          </view>
          <view class="title-content">
            <text class="module-title">系统管理</text>
            <text class="module-desc">用户、角色、权限管理</text>
          </view>
        </view>
        <view class="header-badge">
          <text class="badge-text">{{ systemMenus.length }}</text>
        </view>
      </view>
      <view class="grid-section">
        <view
          class="grid-item"
          v-for="(item, index) in systemMenus"
          :key="index"
          @tap="handleMenu(item)"
          :class="{ 'item-active': activeItem === `system-${index}` }"
          @touchstart="setActiveItem(`system-${index}`)"
          @touchend="clearActiveItem"
        >
          <view class="icon-box" :style="{ background: item.gradient }">
            <wd-icon :name="item.icon" color="#ffffff" size="36rpx" />
            <view class="icon-glow" :style="{ background: item.glowColor }"></view>
          </view>
          <text class="menu-name">{{ item.name }}</text>
          <view class="item-ripple"></view>
        </view>
      </view>
    </view>

    <!-- 系统监控模块 -->
    <view class="module-section" :class="{ 'section-active': activeSection === 'monitor' }">
      <view class="module-header">
        <view class="header-left">
          <view class="title-icon">
            <wd-icon name="chart" color="#667eea" size="28rpx" />
          </view>
          <view class="title-content">
            <text class="module-title">系统监控</text>
            <text class="module-desc">性能监控与任务管理</text>
          </view>
        </view>
        <view class="header-badge">
          <text class="badge-text">{{ monitorMenus.length }}</text>
        </view>
      </view>
      <view class="grid-section">
        <view
          class="grid-item"
          v-for="(item, index) in monitorMenus"
          :key="index"
          @tap="handleMenu(item)"
          :class="{ 'item-active': activeItem === `monitor-${index}` }"
          @touchstart="setActiveItem(`monitor-${index}`)"
          @touchend="clearActiveItem"
        >
          <view class="icon-box" :style="{ background: item.gradient }">
            <wd-icon :name="item.icon" color="#ffffff" size="36rpx" />
            <view class="icon-glow" :style="{ background: item.glowColor }"></view>
          </view>
          <text class="menu-name">{{ item.name }}</text>
          <view class="item-ripple"></view>
        </view>
      </view>
    </view>

    <!-- 系统工具模块 -->
    <view class="module-section" :class="{ 'section-active': activeSection === 'tools' }">
      <view class="module-header">
        <view class="header-left">
          <view class="title-icon">
            <wd-icon name="tool" color="#667eea" size="28rpx" />
          </view>
          <view class="title-content">
            <text class="module-title">系统工具</text>
            <text class="module-desc">开发工具与组件测试</text>
          </view>
        </view>
        <view class="header-badge">
          <text class="badge-text">{{ toolMenus.length }}</text>
        </view>
      </view>
      <view class="grid-section">
        <view
          class="grid-item"
          v-for="(item, index) in toolMenus"
          :key="index"
          @tap="handleMenu(item)"
          :class="{ 'item-active': activeItem === `tools-${index}` }"
          @touchstart="setActiveItem(`tools-${index}`)"
          @touchend="clearActiveItem"
        >
          <view class="icon-box" :style="{ background: item.gradient }">
            <wd-icon :name="item.icon" color="#ffffff" size="36rpx" />
            <view class="icon-glow" :style="{ background: item.glowColor }"></view>
          </view>
          <text class="menu-name">{{ item.name }}</text>
          <view class="item-ripple"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const activeSection = ref<string | null>(null)
const activeItem = ref<string | null>(null)

// 状态栏高度
const statusBarHeight = ref(0)

// 设置激活项
const setActiveItem = (item: string) => {
  activeItem.value = item
}

// 清除激活项
const clearActiveItem = () => {
  activeItem.value = null
}

// 系统管理菜单
const systemMenus = ref([
  {
    name: '用户管理',
    icon: 'user',
    gradient: 'linear-gradient(135deg, #4A90E2, #357ABD)',
    glowColor: 'rgba(74, 144, 226, 0.3)',
    path: '/pages/system/user/index'
  },
  {
    name: '角色管理',
    icon: 'user-circle',
    gradient: 'linear-gradient(135deg, #50C878, #3A9B5C)',
    glowColor: 'rgba(80, 200, 120, 0.3)',
    path: '/pages/system/role/index'
  },
  {
    name: '菜单管理',
    icon: 'list',
    gradient: 'linear-gradient(135deg, #FF9500, #E6850E)',
    glowColor: 'rgba(255, 149, 0, 0.3)',
    path: '/pages/system/menu/index'
  },
  {
    name: '部门管理',
    icon: 'home',
    gradient: 'linear-gradient(135deg, #FF6B6B, #E55555)',
    glowColor: 'rgba(255, 107, 107, 0.3)',
    path: '/pages/system/dept/index'
  },
  {
    name: '岗位管理',
    icon: 'flag',
    gradient: 'linear-gradient(135deg, #9B59B6, #8E44AD)',
    glowColor: 'rgba(155, 89, 182, 0.3)',
    path: '/pages/system/post/index'
  },
  {
    name: '字典管理',
    icon: 'book',
    gradient: 'linear-gradient(135deg, #95A5A6, #7F8C8D)',
    glowColor: 'rgba(149, 165, 166, 0.3)',
    path: '/pages/system/dict/index'
  }
])

// 系统监控菜单
const monitorMenus = ref([
  {
    name: '在线用户',
    icon: 'user-circle',
    gradient: 'linear-gradient(135deg, #9B59B6, #8E44AD)',
    glowColor: 'rgba(155, 89, 182, 0.3)',
    path: '/pages/monitor/online/index'
  },
  {
    name: '定时任务',
    icon: 'clock',
    gradient: 'linear-gradient(135deg, #FF9500, #E6850E)',
    glowColor: 'rgba(255, 149, 0, 0.3)',
    path: '/pages/monitor/job/index'
  },
  {
    name: '服务监控',
    icon: 'chart',
    gradient: 'linear-gradient(135deg, #795548, #5D4037)',
    glowColor: 'rgba(121, 85, 72, 0.3)',
    path: '/pages/monitor/server/index'
  },
  {
    name: '系统日志',
    icon: 'document',
    gradient: 'linear-gradient(135deg, #607D8B, #455A64)',
    glowColor: 'rgba(96, 125, 139, 0.3)',
    path: '/pages/monitor/log/index'
  }
])

// 系统工具菜单
const toolMenus = ref([
  {
    name: '表单构建',
    icon: 'edit',
    gradient: 'linear-gradient(135deg, #2196F3, #1976D2)',
    glowColor: 'rgba(33, 150, 243, 0.3)',
    path: '/pages/tool/build/index'
  },
  {
    name: '代码生成',
    icon: 'code',
    gradient: 'linear-gradient(135deg, #4CAF50, #388E3C)',
    glowColor: 'rgba(76, 175, 80, 0.3)',
    path: '/pages/tool/gen/index'
  },
  {
    name: '系统接口',
    icon: 'link',
    gradient: 'linear-gradient(135deg, #FF5722, #D84315)',
    glowColor: 'rgba(255, 87, 34, 0.3)',
    path: '/pages/tool/swagger/index'
  },
  {
    name: '组件测试',
    icon: 'apps',
    gradient: 'linear-gradient(135deg, #E91E63, #C2185B)',
    glowColor: 'rgba(233, 30, 99, 0.3)',
    path: '/pages/tool/test/index'
  }
])

// 设置状态栏高度
const setStatusBarHeight = () => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
}

// 菜单点击处理
const handleMenu = (item: any) => {
  if (item.path) {
    uni.showLoading({
      title: '加载中...'
    })

    setTimeout(() => {
      uni.hideLoading()
      uni.navigateTo({
        url: item.path,
        fail: () => {
          uni.showToast({
            title: '页面不存在',
            icon: 'error',
            duration: 2000
          })
        }
      })
    }, 500)
  } else {
    uni.showToast({
      title: '功能开发中',
      icon: 'none',
      duration: 2000
    })
  }
}

// 页面加载时设置状态栏高度
onMounted(() => {
  setStatusBarHeight()
})
</script>

<style lang="scss" scoped>
.work-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
  padding-bottom: 40rpx;
}

/* 状态栏占位 */
.status-bar-placeholder {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;

  .decoration-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    animation: float 25s ease-in-out infinite;

    &.shape-1 {
      width: 300rpx;
      height: 300rpx;
      top: 5%;
      right: -100rpx;
      animation-delay: 0s;
    }

    &.shape-2 {
      width: 200rpx;
      height: 200rpx;
      top: 50%;
      left: -80rpx;
      animation-delay: 8s;
    }

    &.shape-3 {
      width: 150rpx;
      height: 150rpx;
      top: 75%;
      right: 10%;
      animation-delay: 16s;
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-30rpx) rotate(90deg); }
  50% { transform: translateY(-15rpx) rotate(180deg); }
  75% { transform: translateY(-25rpx) rotate(270deg); }
}

/* 页面头部 */
.page-header {
  padding: 20rpx 40rpx 60rpx;
  text-align: center;
  position: relative;
  z-index: 2;

  .header-content {
    .page-title {
      display: block;
      font-size: 52rpx;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 16rpx;
      text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
      letter-spacing: 2rpx;
      user-select: text;
      -webkit-user-select: text;

      &::selection {
        background: rgba(255, 255, 255, 0.3);
        color: #ffffff;
      }
    }

    .page-subtitle {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 400;
      user-select: text;
      -webkit-user-select: text;

      &::selection {
        background: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

/* 模块区域 */
.module-section {
  margin: 0 30rpx 50rpx;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;

  &.section-active {
    transform: scale(1.02);
  }
}

.module-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.title-icon {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.1));
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
}

.title-content {
  display: flex;
  flex-direction: column;

  .module-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    margin-bottom: 4rpx;
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(102, 126, 234, 0.3);
      color: #333333;
    }
  }

  .module-desc {
    font-size: 24rpx;
    color: #999999;
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(153, 153, 153, 0.3);
      color: #999999;
    }
  }
}

.header-badge {
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);

  .badge-text {
    font-size: 24rpx;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
  }
}

/* 网格区域 */
.grid-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 0 0 24rpx 24rpx;
  padding: 40rpx 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  border-top: none;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  border-radius: 20rpx;
  background: #fafbfc;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2rpx solid transparent;

  /* 波纹效果 */
  .item-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
  }

  &:hover {
    background: #f0f2f5;
    transform: translateY(-8rpx);
    box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
    border-color: rgba(102, 126, 234, 0.2);

    .icon-box {
      transform: scale(1.1);

      .icon-glow {
        opacity: 1;
        transform: scale(1.5);
      }
    }
  }

  &:active,
  &.item-active {
    transform: translateY(-4rpx) scale(0.98);
    background: rgba(102, 126, 234, 0.05);
    border-color: rgba(102, 126, 234, 0.3);

    .item-ripple {
      width: 200rpx;
      height: 200rpx;
    }
  }
}

.icon-box {
  width: 100rpx;
  height: 100rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  /* 图标光晕效果 */
  .icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
  }
}

.menu-name {
  font-size: 28rpx;
  color: #333333;
  text-align: center;
  font-weight: 600;
  line-height: 1.4;
  user-select: text;
  -webkit-user-select: text;

  &::selection {
    background: rgba(102, 126, 234, 0.3);
    color: #333333;
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .page-header {
    padding: 20rpx 30rpx 40rpx;

    .page-title {
      font-size: 44rpx;
    }

    .page-subtitle {
      font-size: 26rpx;
    }
  }

  .module-section {
    margin: 0 20rpx 40rpx;
  }

  .module-header {
    padding: 28rpx 24rpx;
  }

  .title-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 16rpx;
  }

  .title-content {
    .module-title {
      font-size: 32rpx;
    }

    .module-desc {
      font-size: 22rpx;
    }
  }

  .header-badge {
    width: 40rpx;
    height: 40rpx;

    .badge-text {
      font-size: 22rpx;
    }
  }

  .grid-section {
    padding: 30rpx 20rpx;
    gap: 24rpx;
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-item {
    padding: 32rpx 16rpx;
    border-radius: 16rpx;
  }

  .icon-box {
    width: 80rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    .icon-glow {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .menu-name {
    font-size: 26rpx;
  }
}

/* 超小屏幕适配 */
@media screen and (max-width: 600rpx) {
  .grid-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .grid-item {
    padding: 28rpx 12rpx;
  }

  .icon-box {
    width: 70rpx;
    height: 70rpx;
    border-radius: 16rpx;
  }

  .menu-name {
    font-size: 24rpx;
  }
}

/* 动画效果 */
.page-header {
  animation: slideInDown 0.6s ease-out;
}

.module-section:nth-child(2) {
  animation: slideInUp 0.6s ease-out 0.1s both;
}

.module-section:nth-child(3) {
  animation: slideInUp 0.6s ease-out 0.2s both;
}

.module-section:nth-child(4) {
  animation: slideInUp 0.6s ease-out 0.3s both;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 全局文本选择样式 */
::selection {
  background: rgba(102, 126, 234, 0.3);
  color: inherit;
}

::-moz-selection {
  background: rgba(102, 126, 234, 0.3);
  color: inherit;
}
</style>
